<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>实现简单的轮播图片</title>
        <link rel="stylesheet" href="../css/index.css" />
        <!-- <link rel="stylesheet" href="../css/轮播图.css"> -->
        <link rel="stylesheet" href="../img/font_lglin0de7sp/iconfont.css">
    </head>
    <body>
        <!-- 标题 -->
        <div class="blogname clearfix"><p>我的博客</p></div>
         <!-- 导航栏 -->
        <div class="nav">
            <div class="nav-con">
                <ul class="nav1">
                    <li class="shownav1"><a href="#">菜单</a>
                        <ul class="nav2">
                            <li class="shownav2"><a href="#">二级菜单1</a>
                                <ul class="nav3">
                                    <li><a href="#">三级菜单1</a></li>
                                    <li><a href="#">2</a></li>
                                    <li><a href="#">3</a></li>
                                </ul>
                            </li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                        </ul>
                    </li>
                    <li><a href="#">收藏</a></li>
                    <li><a href="#">我的资料</a></li>
                    <li><a href="#">设置</a></li>
                    <li><a href="#">详情</a></li>
                </ul>
            </div>
        </div>

        <!-- 轮播图 -->
        <div class="contain">
            <div class="carousel">
                <div class="slide clearfix">
                    <div class="img-qd sl" index="1">
                        <img src="../img/前端.jpg" alt="">
                        <div class="cover" style="background-color: rgba(255, 255, 255, 0.3);"></div>
                        <h1>前端学习</h1>
                        <p>let's go!</p>
                    </div>
                    <div class="img-sw sl" index="2">
                        <img src="../img/食物.jpg" alt="">
                        <div class="cover" style="background-color: rgba(255, 255, 255, 0.3);"></div>
                        <h1>菜谱收集</h1>
                        <p>let's go!</p>
                    </div>
                    <div class="img-xxzl sl" index="3">
                        <img src="../img/学习资料.jpg" alt="">
                        <div class="cover" style="background-color: rgba(255, 255, 255, 0.3);"></div>
                        <h1>学习资料</h1>
                        <p>let's go!</p>
                    </div>
                    <div class="img-sb sl" index="4">
                        <img src="../img/随笔.jpg" alt="">
                        <div class="cover" style="background-color: rgba(255, 255, 255, 0.3);"></div>
                        <h1>简单随笔</h1>
                        <p>let's go!</p>
                    </div>
                </div>
            </div>
            <div class="but">
                <button class="left btn">&lt;</button>
                <button class="right btn">&gt;</button>
            </div>
            <ul class="indicator">
                <li class="li-active"></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>

       
        <!-- 主要内容 -->
        <div class="main">
            <div class="main-con">
                <div class="main-con-title">
                    <p class="main-con-title-cn">杂乱无章</p>
                    <p class="main-con-title-en">zlwz</p>
                </div>
                <div class="options">
                    <li class="option current">前端</li>
                    <li class="option">菜谱</li>
                    <li class="option">资料</li>
                    <li class="option">随笔</li>
                </div>
                <div class="option-main">
                    <!-- 前端部分 -->
                    <div class="op-main op1">
                        <div class="html">

                        </div>
                        <div class="css">

                        </div>
                        <div class="js">

                        </div>
                    </div>
                    <!-- 菜谱部分 -->
                    <div class="op-main op2" style="display: none;">
                            <div class="jiangxiangbing clearfix">
                                <img src="../img/酱香饼.jpg" alt="">
                                <div class="detail">
                                    <p>酱香饼</p>
                                    <a href="###">查看详细菜谱</a>
                                    <div class="icon">
                                        <i class="iconfont icon-dianzan"></i>
                                        <i class="iconfont icon-shoucang"></i>
                                    </div>
                                </div>
                            </div>
                            
                        
                            <div class="qiehe clearfix">
                                <img src="../img/茄盒.jpg" alt="">
                                <div class="detail">
                                    <p>炸茄盒</p>
                                    <a href="###">查看详细菜谱</a>
                                    <div class="icon">
                                        <i class="iconfont icon-dianzan"></i>
                                        <i class="iconfont icon-shoucang"></i>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="pizza clearfix">
                                <img src="../img/pizza.jpg" alt="">
                                <div class="detail">
                                    <p>pizza</p>
                                    <a href="###">查看详细菜谱</a>
                                    <div class="icon">
                                        <i class="iconfont icon-dianzan"></i>
                                        <i class="iconfont icon-shoucang"></i>
                                    </div>
                                </div>
                            </div>
                    </div>
                    <!-- 资料部分 -->
                    <div class="op-main op3" style="display: none;">
                        <div>
                            
                        </div>
                    </div>
                    <!-- 随笔部分 -->
                    <div class="op-main op4" style="display: none;">
                        <div>
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>



        <!-- <script src="../js/轮播图.js"></script> -->
        <script src="../js/index.js"></script>
        <script src="../img/font_lglin0de7sp/iconfont.js"></script>
    </body>
</html>
 